<html>
	<head>
		<title>Example jQuery Bounce page</title>
		<!-- Load the MooTools javascript -->
		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
		<script type="text/javascript" src="jquery-easing.js"></script>
		<!-- Load the Bounce javascript -->
		<script type="text/javascript" src="jquery.bounce.compressed.js"></script>
		<!-- Wait for the page to be ready before setting up the bouncers! -->
		<script type="text/javascript">
			// -----------------------------------------------------------------------------------------------------------
			// Instruction to wait for the page to be ready
			$(document).ready(function() {
				// Setup the bouncers for all 'textarea' elements, configure the clickable bar to be at the top
				// and also open the second bouncer
				$('textarea').bounce({bottom: false});
					//.bounceOpen(2);
				$('#specialtextarea').bounceOpen();
				// Close the wait instruction
			});
			// -----------------------------------------------------------------------------------------------------------
		</script>
		<!-- Example CSS (.mybounce, textarea) -->
		<style type="text/css">
			.mybounce {
				height: 10px;
				width: 302px;
				background: #ccc;
				text-align: center;
				font-size: 8px;
				overflow: hidden;
				border: #888 ridge 2px;
				margin-bottom: 10px;
				margin-right: 50px;
				float: left;
			}
			textarea {
				height: 95%;
				width: 300px;
				background: #ccc;
				display: block;
			}
			p.special {
				border-top: #888 solid 2px;
				clear: both;
			}
		</style>
	</head>
	<body>
		<h1>Bouncy, bouncy!</h1>
		<p>text to read... text to read... text to read... text to read... text to read... text to read... text to read... text to read... text to read... text to read... text to read... text to read... text to read... text to read... text to read... text to read... text to read... text to read... </p>
		<textarea class="tall" id="specialtextarea">my bounce1
				blah blah blah blah
				blah blah blah blah
				blah blah blah blah
				blah blah blah blah
				blah blah blah blah
				blah blah blah blah
				blah blah blah blah
				blah blah blah blah
				blah blah blah blah
				blah blah blah blah
				blah blah blah blah
				blah blah blah blah
				blah blah blah blah
				blah blah blah blah
				blah blah blah blah
				blah blah blah blah
				blah blah blah blah
				blah blah blah blah</textarea>
		<textarea class="tall">my bounce2
				blah blah blah blah
				blah blah blah blah
				blah blah blah blah
				blah blah blah blah
				blah blah blah blah
				blah blah blah blah
				blah blah blah blah
				blah blah blah blah
				blah blah blah blah
				blah blah blah blah
				blah blah blah blah
				blah blah blah blah
				blah blah blah blah
				blah blah blah blah
				blah blah blah blah
				blah blah blah blah
				blah blah blah blah
				blah blah blah blah</textarea>
		<p class="special">Some more text... Some more text... Some more text... Some more text... Some more text... Some more text... Some more text... Some more text... Some more text... Some more text... Some more text... Some more text... Some more text... Some more text... Some more text... Some more text... </p>
		
		<p><a href="http://plugins.jquery.com/project/bounce">Link back to jQuery Bounce</a></p>
	</body>
</html>
